<template>
    <div class="musicControl">
        <!--播放暂停 上下一首-->
        <div class="status">
            <div class="iconfont iconshangyishou" @click="next(false)"></div>
            <div class="iconfont " 
            @click="playControl('playFlag')"
            :class="playFlag ? 'iconbofang' : 'iconzanting'"
            ></div>
            <div class="iconfont iconxiayishou" @click="next(true)"></div>
        </div>
        <!--进度条-->
        <div class="dt">
            <div class="currentTime">{{currentTime | currentTimeFormat}}</div>
            <div class="progress" @click="changeProgress" ref="progress">
                <div class="progress_bar" ref="progress_bar" ></div>
            </div>
            <div class="allTime">{{songBaseInfo.dt | dtFormat}}</div>
        </div>
        <!--音量、歌词等-->
        <div class="control_right">
            <div class="volume">
                <div class="iconfont " 
                @click="closeVloume"
                :class="volumeFlag ? 'iconyinliang' : 'iconjingyin'"
                ></div>
                <div class="volumePros" ref="volumePros" @click="changeVolume">
                    <div class="volumePros_bar" ref="volumePros_bar"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {dtFormat,currentTimeFormat} from '../../../util/tool'
import MsgBus from '../../../util/bus'
export default {
    name: 'musicControl',
    props: [
        'songBaseInfo',
        'playFlag',
        'currentTime',

    ],
    data() {
        return {
            // 歌曲总进度DOM
            progress:null,
            // 歌曲当前进度条DOM
            volumePros_bar:null,
            // 音量DOM
            volumePros:null,
            // 音量当前DOM
            volumePros_bar:null,
            // 是否静音
            volumeFlag:true,
            // 当前音量大小
            volumeCount:1
        };
    },
    computed: {

    },
    created() {
        

    },
    mounted() {
        // 监听进度条变化
        MsgBus.$on('rate',(res => {
            this.$refs.progress_bar.style.width = res
            this.$refs.progress_bar.style.transition = 'all .3s'
        }))
        // 获取相关进度条DOM
        this.progress = this.$refs.progress
        this.volumePros = this.$refs.volumePros
        this.volumePros_bar = this.$refs.volumePros_bar
    },
    watch: {

    },
    methods: {
        // 暂停/播放样式改变
        playControl(flag){
            this.$emit('controlBtn',flag)
        },
        // 上、下一首
        next(flag){
            this.$emit('changeMusic',flag)
        },
        // 改变进度
        changeProgress(el){
            // 鼠标在进度条点击水平距离
            let width = el.clientX - this.progress.offsetLeft
            // width只能获取行内设置的width样式 
            let rate =  width / this.progress.clientWidth
            this.$emit('changeCurrentTime',rate)
        },
        // 改变音量
        changeVolume(el){
            if(!this.volumeFlag){
                this.volumeFlag = true
            }
            let width = el.clientX - this.volumePros.offsetLeft
            let volume = width / this.volumePros.clientWidth
            this.volumeCount = volume
            this.volumePros_bar.style.width = volume * 100 + '%'
            this.$emit('changeVolume',volume)
        },
        // 静音
        closeVloume(){
            if(this.volumeFlag){
                this.volumePros_bar.style.width = 0
                this.volumeFlag = false
                this.$emit('changeVolume',0)
            }else{
                this.volumePros_bar.style.width = this.volumeCount * 100 + '%'
                this.volumeFlag = true
                this.$emit('changeVolume',this.volumeCount)
            }
            
        }
    },
    filters:{
        dtFormat(el){
            return currentTimeFormat(el /1000)
        },
        currentTimeFormat(el){
            return currentTimeFormat(el)
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
@textColor:#fff;
@itemecolor:#192a56;
@progressColor:#C2C2C4;
@progressLightColor:#fbc531;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.musicControl{
    color: @itemecolor
}
.iconfont{
    cursor: pointer;
}
.status{
    .position_flex(space-around);
    width: 13vw;
    color: @textColor;
    div{
        
        font-size: 18px;
        padding: 5px;
        background-color: @itemecolor;
        border-radius: 50%;

    }
    .iconbofang{
        font-size: 16px;
        padding: 8px;
    }
    .iconzanting{
        font-size: 22px
    }
}
.dt{
    .position_flex;
    width: 65%;
    .progress{
        height: 4px;
        width: 90%;
        border-radius: 2px;
        background-color: @progressColor;
        cursor: pointer;
        .progress_bar{
            width: 0;
            height: 4px;
            background-color: @itemecolor;
        }
    }
}
.control_right{
    margin-left: 10px;
    .volume {
        .position_flex;
        div{
            font-size: 18px;
        }
        
    }
    .volumePros{
        width: 100px;
        height: 4px;
        background-color: @progressColor;
        margin-left: 10px;
        cursor: pointer;
        div{
            width: 100%;
            height: 4px;
            background-color: @itemecolor;
        }
    }
}
</style>
